<template>
  <div class="data-listen" >
    <v-code
      :value="showingData+'\n'"
      style="height: 500px;overflow-y: auto;"
      ref="codebox"
    ></v-code>
    <div class="input-box">
      <!-- <el-input class="input-calss" spellcheck="false" type="text" placeholder="请输入topic" v-model="topIc"  ></el-input> -->
      <el-input class="input-calss" spellcheck="false" type="textarea" placeholder="请输入..." v-model="sendData" rows="5"  ></el-input>
      <div style="margin-top: 10px;text-align: right;">
        <el-button type="primary" style="width: 100px;"  @click="handleSend"  :disabled="!sendData">发送</el-button>
      </div>
    </div>
  </div>
</template>
<script>  
import code from '../cmdData/code'
export default{
  props:{
    json:''
  },
  components:{'v-code':code},
  data(){
    return{
      showingData:'',
      topIc:'',
      sendData:''
    }
  },
  created(){

  },
  methods:{
    handleSend(){
      console.log(this.sendData)
      let arr = [];
      this.$ws.sendWs(`SEND:{"data":"${this.sendData.replaceAll('"','\\"')}"}`)
      arr.push(this.parseTime(new Date().getTime()));
      // arr.push('topic:'+this.topIc+'');
      arr.push(' send : '+this.sendData);
      this.showingData = this.showingData+arr.join('\n')+'\n';
    }
  },
  watch:{
    json(){
      this.showingData = this.showingData+this.parseTime(new Date().getTime())+'\n'+this.json;
    },
    showingData(){
      this.$nextTick(() => {
        let dom = document.getElementsByClassName('CodeMirror-scroll')[0];
        let height = dom.scrollHeight;
        dom.scrollTop = height;
      });
    }
  }

}
</script>

<style lang="scss" scoped>
.input-box{
  .input-calss{
    font-size: 18px;
    font-weight: bold;
    color: #222;
    margin-top: 10px;
  }
}
</style>